<template>
  <div>
    <pstep :stepData="stepData" :doneNum="doneNum"  style="margin-bottom: 20px;"></pstep>
    <!-- 第一步 -->
    <div v-show="doneNum===1">
      <pform ref="form" :model="form" lw="160">
        <el-form-item label="漏洞版本">
          <el-select style="width:233px;" v-model="form.field1" placeholder="请选择">
            <el-option label="漏洞库库20230210" value="1"></el-option>
            <el-option label="漏洞库20230213" value="2"></el-option>
            <el-option label="漏洞库20230217" value="3"></el-option>
            <el-option label="漏洞库20230211" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="执行线程">
          <el-select style="width:233px;" v-model="form.field2" placeholder="请选择">
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
            <el-option label="4" value="4"></el-option>
            <el-option label="5" value="5"></el-option>
            <el-option label="6" value="6"></el-option>
            <el-option label="7" value="7"></el-option>
            <el-option label="8" value="8"></el-option>
            <el-option label="9" value="9"></el-option>
            <el-option label="10" value="10"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="执行周期">
          <el-button-group>
            <el-button :class="executeType === 1 ? 'btn-selected':'' " @click="handleExecuteType(1)">每天执行一次</el-button>
            <el-button :class="executeType === 2 ? 'btn-selected':''" @click="handleExecuteType(2)">每周执行一次</el-button>
            <el-button :class="executeType === 3 ? 'btn-selected':''"  @click="handleExecuteType(3)">每月执行一次</el-button>
          </el-button-group>
        </el-form-item>
        <el-form-item label="">
          <div v-if="executeType === 2">
            <div>
              <el-radio v-model="form.field4" label="1">周一</el-radio>
              <el-radio v-model="form.field4" label="2">周二</el-radio>
              <el-radio v-model="form.field4" label="3">周三</el-radio>
              <el-radio v-model="form.field4" label="4">周四</el-radio>
              <el-radio v-model="form.field4" label="5">周五</el-radio>
              <el-radio v-model="form.field4" label="6">周六</el-radio>
              <el-radio v-model="form.field4" label="7">周日</el-radio>
            </div>
          </div>

          <div v-if="executeType === 1 || executeType === 2">
            <el-time-picker
              v-model="form.field3"
              :picker-options="{
                selectableRange: '00:00:00 - 23:59:59'
              }"
              placeholder="任意时间">
            </el-time-picker>
          </div>

          <div v-if="executeType === 3">
            <el-date-picker
              v-model="form.field5"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="扫描主机">
          <el-input
            placeholder="请输入内容"
            suffix-icon="el-icon-search"
            style="width:233px;"
            v-model="form.field3">
          </el-input>
        </el-form-item>
        <el-form-item label="">
          <plist ref="pList" :tableData="tableData" :tableColumn="tableColumn" :hasIndex="false" :hasRadioSelect="true">
          </plist>
        </el-form-item>
      </pform>
      <div class="step-btn-box">
        <el-button type="primary" @click="handleAdd">立即创建</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import pstep from '@/components/publicStep'
export default {
  components:{
    pstep
  },
  created() {
    this.init();
  },
  data(){
    return {
      stepData:[{num:1,nameIn:'1',nameOut:'基础配置'}
        // ,{num:2,nameIn:'2',nameOut:'确认信息'},
      ],
      doneNum:1,
      form:{
        field4: '1'
      },
      executeType: 1,
      tableData:[],
      showColumn: [],
      tableColumn: [
        {
          field: "code",
          width: "50"
        },
        {
          field: "hostName",
          label: "主机名",
          width: "220"
        },
        {
          field: "ipAddress",
          label: "IP地址",
          width: "220"
        },
        {
          field: "agent",
          label: "Agent",
        },
      ],
    }
  },
  methods:{
    init(){
      this.$nextTick(()=>{
        this.tableData = [
          {code:1,hostName:"physical.o3",ipAddress:"14.56.3.2",agent:"1.0.1"},
          {code:2,hostName:"physical.o3",ipAddress:"14.156.3.2",agent:"1.0.2"},
          {code:3,hostName:"physical.o3",ipAddress:"14.516.3.2",agent:"1.0.2"},
        ]
        this.$refs.pList.selectCode=1;
      })
    },
    handleAdd(){
      this.$router.push(
        {
          path:'/hostSecurity/vbScaning',
        })
    },
    handleExecuteType(executeType){
      this.executeType = executeType;
    }
  }
}
</script>
<style scoped lang="less">
.btn-selected{
  color: #409EFF;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}
</style>
